<template>
    <div id="purchaseAdd">
        <h1>进货添加</h1>
        <div class="form">
            <el-form ref="form" :model="form" label-width="80px" :label-position="left">
                <el-form-item label="供货商:">
                    <el-input v-model="form.supplier"></el-input>
                </el-form-item>
                <el-form-item label="门店:">
                    <el-input v-model="form.store"></el-input>
                </el-form-item>
                <el-form-item label="药品:" style="width:568px;">
                    <el-input v-model="form.drug1"></el-input>
                    <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="药品:" style="width:568px;">
                    <el-input v-model="form.drug2"></el-input>
                    <el-input-number v-model="num2" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item label="药品:" style="width:568px;">
                    <el-input v-model="form.drug3"></el-input>
                    <el-input-number v-model="num3" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">添加</el-button>
                    <el-button type="primary">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        
        <!-- 只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个组件了 -->
        <!-- 它的作用很单纯：占位符 -->
        <router-view></router-view>
    </div>
  </template>
  
  <script>
    export default {
        data() {
            return {
                left: 'left',
                num1: 1,
                num2: 1,
                num3: 1,               
                form: {
                    supplier: '',
                    store: '',
                    drug1: '',
                    drug2: '',
                    drug3: '',

                }
            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            onSubmit() {
                console.log('submit!');
                confirm("添加成功")
            }
        }
    }
  </script>

<style lang="less">
    #purchaseAdd {
        h1 {
            margin-left: 20px;
            margin-top: 22px;  
        }
        
        .form {
            margin-left: 20px;
            margin-top: 22px;
            width: 430px;
            .el-button--primary {
                width: 90px;
                margin-right: 30px;
            }
            .el-form-item__content {
                display: flex;
                .el-input-number {
                    margin-left: 10px;
                    .el-input__inner {
                        background-color: #409eff;
                        color: white;
                    }
                    .el-input-number__decrease {
                        background-color: #409eff;
                        color: white;
                    }
                    .el-input-number__increase {
                        background-color: #409eff;
                        color: white;
                    }
                }
            }
            
    }
}
    
</style>